<template>
	<view class="mine">
		<!-- 背景图 -->
		<view class="background">
			<image class="background-image"
				src="https://img-qn.51miz.com/preview/element/00/01/18/63/E-1186304-085F979A.jpg"
				mode="center|widthFix">
			</image>
		</view>

		<!-- 用户账户 -->
		<view class="account">
			<!-- 头像 -->
			<view class="avatar">
				<u-avatar :src="userInfo.header_img||'https://cdn.uviewui.com/uview/album/1.jpg'" size="48"></u-avatar>
				<text class="avatar-text" v-if="userInfo">{{userInfo.name}}</text>
				<text class="avatar-text" @tap="login" v-else>请登录</text>
			</view>
			<!-- 余额 -->
			<view class="balanceBox">
				<view class="balance">
					<view class="balance-number">￥<text class="balance-number__num">{{balance}}</text></view>
					<text class="balance-title">我的余额</text>
				</view>
				<view class="recharge">
					<u-button class="u-reset-button" text="充值" color="#ff516b"
						:customStyle="{height: '60rpx',width: '160rpx'}" :disabled="userInfo?false:true"
						throttleTime="1000" @click="toRecharge"></u-button>
				</view>
			</view>
		</view>

		<!-- 我的服务 -->
		<view class="service">
			<!-- 标题 -->
			<view class="service-title">我的服务</view>
			<!-- 服务板块 -->
			<view class="service-content">
				<u-grid col="4" @click="selectService">
					<u-grid-item>
						<view class="service-content__item">
							<i class="iconfont icon-dizhi"></i>
							<text class="service-content__text">收货地址</text>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="service-content__item">
							<i class="iconfont icon-gerenziliao"></i>
							<text class="service-content__text">个人资料</text>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="service-content__item">
							<i class="iconfont icon-kefu"></i>
							<text class="service-content__text">联系客服</text>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="service-content__item">
							<i class="iconfont icon-youhuiquan1"></i>
							<text class="service-content__text">优惠券</text>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				// 用户余额
				balance: 0,
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			...mapMutations(['SaveUserInfo']),
			// 跳转到充值页
			toRecharge() {
				this.$Router.push('/recharge');
			},
			// 选择(跳转)服务板块
			selectService(i) {
				switch (i) {
					case (0): {
						// 收货地址
						this.$Router.push('/address');
						break;
					};
					case (1): {
						// 个人资料
						this.$Router.push('/personal');
						break;
					};
					case (2): {
						// 联系客服
						console.log(2);
						break;
					};
					case (3): {
						// 优惠券
						console.log(3);
						break;
					};
					default:
						break;
				}
			},
			// 用户登录
			async login() {
				// 获取用户code
				uni.login({
					success: async (res) => {
						// 发起用户登录
						let data = await this.$api.user.userLoginAPI(res.code);
						// 保存用户登录信息
						this.SaveUserInfo(data.data);
						// 保存用户余额
						this.balance = data.data.money;
						// console.log(data.data);
					}
				})
			},
			// 获取用户余额信息
			async getUserBalance() {
				let data = await this.$api.pay.queryBalanceAPI();
				// 保存用户余额
				this.balance = data.result.money;
			},
		},
		// 每次进入页面触发
		onShow() {
			if (this.userInfo) {
				// 如果用户登录，请求用户余额信息
				this.getUserBalance();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		@include page-bgc();
		position: relative;
		z-index: 1;
		padding-top: 14vh;

		// 背景图
		.background {
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
			width: 100%;

			.background-image {
				width: 100%;
				height: 28vh;
			}
		}

		// 用户账户
		.account {
			@include whiteCard(rgba(#fff, 0.8));
			padding: 32rpx 20rpx;

			// 头像
			.avatar {
				display: flex;
				align-items: center;

				.avatar-text {
					width: 260rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					margin-left: 10px;
				}
			}

			// 余额
			.balanceBox {
				margin-top: 46rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;

				.balance {
					display: flex;
					flex-direction: column;
					align-items: flex-start;

					.balance-number {
						font-size: 28rpx;

						.balance-number__num {
							font-size: 44rpx;
						}
					}

					.balance-title {
						font-size: 24rpx;
						margin-top: 4px;
					}
				}

				.recharge {
					::v-deep .u-button__text {
						font-size: 26rpx !important;
					}
				}

			}
		}

		// 我的服务
		.service {
			@include whiteCard();
			padding: 32rpx 20rpx;

			// 标题
			.service-title {
				font-size: 30rpx;
				margin-bottom: 32rpx;
				padding-left: 20rpx;
			}

			// 服务板块
			.service-content {
				margin-top: 40rpx;

				.service-content__item {
					text-align: center;

					.iconfont {
						font-size: 40rpx;
						color: $theme-color;
						margin-bottom: 4px;
					}

					.service-content__text {
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>